<template>
  <!-- 商品项信息 -->
  <el-dialog
    :title="dialogType + '商品项信息'"
    :visible.sync="dialogVisible"
    :before-close="closedialog"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        ref="formData"
        :model="form"
        :rules="rules"
        label-width="148px"
        label-suffix=":"
        size="mini"
        class="flex-form good-form"
      >
        <el-form-item label="HS编码" prop="hsCode">
          <select-hs-code @handleInputCode="handleInputCode" @handleSelectedHsCode="handleSelectedHsCode"></select-hs-code>
        </el-form-item>
        <el-form-item label="商品项简要描述" prop="goodsBriefDesc">
          <el-input
            v-model="form.goodsBriefDesc"
            placeholder="请输入商品项简要描述"
          />
        </el-form-item>
        <el-form-item label="商品项件数" prop="packNo">
          <el-input-number
            v-model="form.packNo"
            placeholder="商品项件数"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="货物总毛重(KG)" prop="grossWt">
          <el-input-number
            v-model="form.grossWt"
            placeholder="货物总毛重(KG)"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="申报总价(元)" prop="goodsPrice">
          <el-input-number
            v-model="form.goodsPrice"
            placeholder="申报总价(元)"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="包装种类" prop="wrapType">
          <el-select
            v-model="form.wrapType"
            placeholder="请选择包装种类"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in dict.type.custom_wrap_type"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危险品编号" prop="undgNoName">
          <el-input v-model="form.undgNoName" placeholder="危险品编号" />
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button
            v-if="dialogType == '新增'"
            type="success"
            plain
            @click="addForm"
            size="mini"
            >添加商品</el-button
          >
          <el-button v-else type="success" plain @click="editForm" size="mini"
            >保存修改</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-if="dialogVisible"
        :data="tableData"
        size="mini"
        style="width: 100%"
        border
      >
        <el-empty
          slot="empty"
          :image="require('@/assets/images/empty.png')"
          :image-size="80"
        ></el-empty>
        <el-table-column
          prop="goodsBriefDesc"
          label="商品项简要描述"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="packNo"
          label="商品项件数"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="grossWt"
          label="货物总毛重(KG)"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="申报总价(元)"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="wrapType"
          label="包装种类"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="hsCode"
          label="HS编码"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="undgNoName"
          label="危险品编号"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isEdit"
              size="mini"
              type="text"
              @click="saveGoodItem(scope.row)"
              >保存</el-button
            >
            <el-button
              v-else
              size="mini"
              type="text"
              @click="handleClickEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click.native.prevent="deleteGoodItem(scope.$index, tableData)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" size="small">确定</el-button>
      <el-button @click="closedialog" size="small">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import selectHsCode from '../../components/selectHSCode.vue';
export default {
  name: "goodsTable",
  components: {
    selectHsCode
  },
  props: {
    currentAddRow: {
      type: Object,
      default: () => {},
    },
    dict: {},
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      form: {},
      rules: {
        goodsBriefDesc: [
          {
            required: true,
            message: "商品简要描述不能为空",
            trigger: "blur",
          },
        ],
        packNo: [
          {
            required: true,
            message: "商品项件数不能为空",
            trigger: "blur",
          },
        ],
        goodsPrice: [
          {
            required: true,
            message: "申报总价(元)不能为空",
            trigger: "blur",
          },
        ],
        grossWt: [
          {
            required: true,
            message: "货物总毛重(KG)不能为空",
            trigger: "blur",
          },
        ],
        wrapType: [
          {
            required: true,
            message: "包装种类不能为空",
            trigger: "blur",
          },
        ],
      },
      dialogType: "新增",
      editIndex: null,
    };
  },
  methods: {
    open(row) {
      this.dialogVisible = true;
      this.initForm();
      this.tableData = row.goodsItemList;
    },
    closedialog() {
      this.tableData = [];
      this.dialogVisible = false;
    },
    // 商品编码输入
    handleInputCode(val) {
      this.form.hsCode = val;
    },
    // 选中商品编码
    handleSelectedHsCode(value) {
      this.form.hsCode = value.codeTs;
      this.form.goodsBriefDesc = value.gName;
    },
    initForm() {
      this.form = {
        hsCode: "",
        goodsBriefDesc: "",
        packNo: "",
        grossWt: "",
        goodsPrice: "",
        wrapType: "",
        undgNoName: "",
      };
    },
    handleClickEdit(index, row) {
      this.dialogType = "编辑";
      this.editIndex = index;
      this.form = JSON.parse(JSON.stringify(row));
    },
    deleteGoodItem(index, rows) {
      rows.splice(index, 1);
    },
    addForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.tableData.push(this.form);
          this.dialogType = "新增";
          this.initForm();
        }
      });
    },
    editForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, this.form);
          this.dialogType = "编辑";
          this.initForm();
        }
      });
    },
    submit() {
      this.$emit("submitGoods", this.tableData);
      this.closedialog();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 10px;
}
.btn {
  margin-bottom: 10px;
}
::v-deep .el-empty {
  padding: 10px 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
.table-box {
  max-height: 451px;
  overflow-y: scroll;
}
::v-deep .el-table {
  th {
    background-color: #ECF5FF;
    color: #333;
  }
}
::v-deep .el-input-number--mini {
  width: 116px;
}
.good-form {
  ::v-deep .el-form-item {
    width: 33%;
    .el-input-number {
      width: 100%;
    }
  }
}
</style>
